<template>
    <div id="share">
        <h1 class="share_title">滑动选择图片样式</h1>
        <ul class="container" ref="contain">
          <!-- 不写key以确保数据会刷新 -->
            <li class="share_img" v-for="item in images" v-finger:press-move="pressMove" v-finger:swipe="swipe">
                <img v-bind:src="item"  ref="imgc">
            </li>
        </ul>
        <img class="share_btn" src="../images/clickshare.png" alt="点击分享">
    </div>
</template>


<script>
import axios from "axios";
export default {
  data() {
    return {
      images: [],
      h: ""
    };
  },
  mounted() {
    axios
      .post("/api/mobile/shareImg", {})
      .then(res => {
        let data = res.data;
        this.images = data.shareImg;

        let imgLength = this.images.length;

        this.$nextTick(() => {});
      })
      .catch();
  },
  updated() {
    let imgLength = this.images.length;

    /**
         * 计算错开的高度
         */
    // 容器总高度
    let contain = this.$refs.contain;
    let conHeight = contain.offsetHeight;
    // 图片高度
    let imgc1 = this.$refs.imgc[0];
    let imgHeight;
    if (this.h) {
      imgHeight = this.h;
      // 计算
      let gapHeight = (conHeight - imgHeight) / (imgLength - 1);
      /**
           * 错开的宽度
           */
      // 容器的宽度
      let conWidth = contain.offsetWidth;
      //图片宽度
      let imgWidth = this.$refs.imgc[0].offsetWidth;
      let gapWidth = (conWidth - imgWidth) / (imgLength - 1);

      for (let i = 0; i < imgLength; i++) {
        this.$refs.imgc[i].style.opacity = 1 / imgLength * (i + 1);
        this.$refs.imgc[i].style.top = gapHeight * i + "px";
        this.$refs.imgc[i].style.left = gapWidth * i + "px";
      }
    }
    imgc1.onload = () => {
      this.h = this.$refs.imgc[0].offsetHeight;
      imgHeight = this.$refs.imgc[0].offsetHeight;
      // 计算
      let gapHeight = (conHeight - imgHeight) / (imgLength - 1);
      /**
           * 错开的宽度
           */
      // 容器的宽度
      let conWidth = contain.offsetWidth;
      //图片宽度
      let imgWidth = this.$refs.imgc[0].offsetWidth;
      let gapWidth = (conWidth - imgWidth) / (imgLength - 1);

      for (let i = 0; i < imgLength; i++) {
        this.$refs.imgc[i].style.opacity = 1 / imgLength * (i + 1);
        this.$refs.imgc[i].style.top = gapHeight * i + "px";
        this.$refs.imgc[i].style.left = gapWidth * i + "px";
      }
    };
  },
  methods: {
    pressMove: function(evt) {
      let target = evt.target;
      if (target.src) {
        target = target.parentElement;
      }
      let currentLeft = target.offsetLeft;
      target.style.left = currentLeft + evt.deltaX + "px";
    },
    swipe: function(evt) {
      let target = evt.target;
      if (target.src) {
        target = target.parentElement;
      }
      let direction = evt.direction;
      target.style = "";
      if (direction === "Left") {
        let last = this.images[0];
        this.images.shift(last);
        this.images.push(last);
      }
      if (direction === "Right") {
        let last = this.images[this.images.length - 1];
        this.images.length = this.images.length - 1;
        this.images.unshift(last);
      }
    }
  }
};
</script>

<style scoped>
#share {
  background: url("../images/bg.png");
  height: 100%;
  text-align: center;
  /* padding: 0 0.8rem; */
}
.share_title {
  background: rgb(0, 57, 98);
  box-shadow: 0 -5px 20px #194469 inset;
  color: #fff;
  font-size: 0.5rem;
  line-height: 1rem;
  text-align: center;
  margin-bottom: .8rem;
}
.container {
  width: calc(100%-1.8rem);
  margin: 0 .8rem;
  height: 9rem;
  overflow: hidden;
  position: relative;
}

.share_img {
  width: 100%;
  height: 100%;
  position: absolute;
}
.share_img img {
  position: absolute;
  width: 5rem;
  /* width: 266px; */
}
.share_btn {
  height: 1rem;
  width: 2.6rem;
  margin-top: 1rem;
}
</style>

